<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css"/>
<link rel="stylesheet" href="${base}/script/uploader/uploader.css"/>
<link rel="stylesheet" href="${base}/script/uploader/demo.css"/>
<div class="row demo-columns" style="margin:0px 5px;">
    <div class="col-md-3">
        <div id="drag-and-drop-zone" class="uploader">
            <div>Drag &amp; Drop Images Here</div>
            <div class="or">-or-</div>
            <div class="browser">
                <label>
                    <span>Click to open the file Browser</span>
                    <input type="file" name="file" accept="image/*" multiple="multiple" title='Click to add Images'>
                </label>
            </div>
        </div>
    </div>
    <!-- / Left column -->

    <div class="col-md-9">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">Uploads</h3>
            </div>
            <div class="panel-body demo-panel-files" id='demo-files'>
                <span class="demo-note">No Files have been selected/droped yet...</span>
            </div>
        </div>
    </div>
    <!-- / Right column -->
</div>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="${base}/script/uploader/demo-preview.js"></script>
<script type="text/javascript" src="${base}/script/uploader/dmuploader.js"></script>
<script type="text/javascript">
    $('#drag-and-drop-zone').dmUploader({
        url: '${base}/admin/article/edit/upload',
        dataType: 'json',
        allowedTypes: 'image/*',
        onInit: function () {
        },
        onNewFile: function (id, file) {
            console.log('onNewFile...' + id);
            $.danidemo.addFile('#demo-files', id, file);

            /*** Begins Image preview loader ***/
            if (typeof FileReader !== "undefined") {
                var reader = new FileReader();
                // Last image added
                var img = $('#demo-files').find('.demo-image-preview').eq(0);
                reader.onload = function (e) {
                    img.attr('src', e.target.result);
                }
                reader.readAsDataURL(file);
            } else {
                // Hide/Remove all Images if FileReader isn't supported
                $('#demo-files').find('.demo-image-preview').remove();
            }
            /*** Ends Image preview loader ***/
        },
        onBeforeUpload: function (id) {
            console.log('onBeforeUpload...' + id);
            $.danidemo.updateFileStatus(id, 'default', 'Uploading...');
        },
        onUploadProgress: function (id, percent) {
            console.log('onUploadProgress...');
            var percentStr = percent + '%';
            $.danidemo.updateFileProgress(id, percentStr);
        },
        onUploadSuccess: function (id, data) {
            console.log('onUploadSuccess...');
            $.danidemo.updateFileStatus(id, 'success', 'Upload Complete');
            $.danidemo.updateFileProgress(id, '100%');
            $.danidemo.fadeOut(id, data);
        },
        onComplete: function () {
            console.log('onComplete...');
        },
        onUploadError: function (id, message) {
            console.log('onUploadError...');
            $.danidemo.updateFileStatus(id, 'error', message);
            $.danidemo.addLog('#demo-debug', 'error', 'Failed to Upload file #' + id + ': ' + message);
        },
        onFileTypeError: function (file) {
            console.log('onFileTypeError...');
            $.danidemo.addLog('#demo-debug', 'error', 'File \'' + file.name + '\' cannot be added: must be an image');
        },
        onFileSizeError: function (file) {
            console.log('onFileSizeError...');
            $.danidemo.addLog('#demo-debug', 'error', 'File \'' + file.name + '\' cannot be added: size excess limit');
        },
        onFallbackMode: function (message) {
            console.log('onFallbackMode...');
            $.danidemo.addLog('#demo-debug', 'info', 'Browser not supported(do something else here!): ' + message);
        }
    });
</script>